@(projectForm: Form[Project], projects: List[Project], configs: List[Resource])

@import play.i18n._

@css = {
	<link rel="stylesheet" type="text/css" href="@routes.Assets.at("css/projects/add.min.css")" />
	<link rel="stylesheet" type="text/css" href="@routes.Assets.at("css/projects/list.min.css")" />
	<link rel="stylesheet" type="text/css" href="@routes.Assets.at("css/codemirror/codemirror.css")" />
	<link rel="stylesheet" type="text/css" href="@routes.Assets.at("css/codemirror/theme/eclipse.css")" />
}

@scripts = {
	<script src="@routes.Assets.at("js/codemirror/codemirror.js")"></script>
	<script src="@routes.Assets.at("js/codemirror/mode/properties/properties.js")"></script>
	<script type="text/javascript">
		var propertiesEditor = null;
		var selectedConfigurationId = null;
		$(document).ready(function() {
			var textarea = document.getElementById('default-configuration');
			propertiesEditor = CodeMirror.fromTextArea(textarea, {
				lineNumbers: true,
				mode: 'properties',
				theme: 'eclipse'
			});
			
			if($('#configuration-selection').val() !== '') {
				$('#configuration-name-wrapper').addClass('hide');
				$('#configuration-edit-existing-info-wrapper').removeClass('hide');
			} else {
				$('#configuration-name-wrapper').removeClass('hide');
				$('#configuration-edit-existing-info-wrapper').addClass('hide');
			}
			
			$('#configuration-selection').change(function() {
				var selector = $(this);
				var configurationId = this.value;
				selector.prop('disabled', true);
				if(configurationId !== 'undefined' && parseInt(configurationId, 10) > 0) {
					jsRoutes.controllers.Configurations.getConfigContentRaw(configurationId).ajax().done(function(response) {
						if(typeof(propertiesEditor) !== 'undefined') {
							selector.prop('disabled', false);
							if(propertiesEditor.getValue() === '' || window.confirm(Messages('view.project.config.default.replace.confirm')) === true) {
								propertiesEditor.toTextArea();
								propertiesEditor = CodeMirror.fromTextArea(textarea, {
									lineNumbers: true,
									mode: 'properties',
									theme: 'eclipse'
								});
								propertiesEditor.setValue(response.content);
								selectedConfigurationId = configurationId;
							} else {
								selector.val(selectedConfigurationId);
							}
							
							$('#configuration-name-wrapper').addClass('hide');
							$('#configuration-edit-existing-info-wrapper').removeClass('hide');
							
							propertiesEditor.focus();
						}
					});
				} else {
					propertiesEditor.toTextArea();
					propertiesEditor = CodeMirror.fromTextArea(textarea, {
						lineNumbers: true,
						mode: 'properties',
						theme: 'eclipse'
					});
					if(propertiesEditor.getValue() !== '' && !window.confirm(Messages('view.project.config.default.change.confirm')) === true) {
						propertiesEditor.setValue('');
					}
					selectedConfigurationId = configurationId;
					
					if($('#configuration-name').val() === '' && $('.resource-form #name').val() !== '') {
						$('#configuration-name').val('Project configuration (' + $('.resource-form #name').val() + ')');
					}
					$('#configuration-name-wrapper').removeClass('hide');
					$('#configuration-edit-existing-info-wrapper').addClass('hide');
					$('#configuration-name').focus();
					
					selector.prop('disabled', false);
				}
			});
		});
	</script>
}

@main(Messages.get("view.project.page.add.title"), css, scripts) {
	
    <div class="resource-form resource-form-2-column">
		@helper.form(action = routes.Projects.createProject()) { 
			
			<div class="column">
				@helper.inputText(projectForm("name"), '_label -> Messages.get("view.project.name.label"), '_help -> Messages.get("view.project.name.help"))
			
				@helper.textarea(projectForm("description"), '_label -> Messages.get("view.project.description.label"), '_help -> Messages.get("view.project.description.help"), 'class -> "input-description")
			</div>
			
			<div class="column">
				<dl id="default-configuration_field">
				    <dt>
				    	<label for="default-configuration">@Messages.get("view.project.config.default.label")</label>
				    </dt>
				    <dd>
				    	<div class="select-configuration-container">
							<select id="configuration-selection" name="default-configuration-selection">
								<option value="">@Messages.get("view.project.config.default.option.new")</option>
								@for(config <- configs) {
									<option value="@config.getId()" @if(Long.toString(config.getId()) == projectForm("default-configuration-id").value()){ selected="selected" }>@config.getName()</option>
								}
							</select>
							<i>@Messages.get("view.project.config.default.help")</i><br/>
							<div id="configuration-name-wrapper" class="hide">
								<b>@Messages.get("view.project.config.default.name.label")</b>
								<input type="text" id="configuration-name" name="default-configuration-name" value="@projectForm("default-configuration-name").value()" />
							</div>
							<div id="configuration-edit-existing-info-wrapper" class="hide">
								<b>@Messages.get("view.project.config.default.change.notification")</b>
							</div>
						</div>

				    	<textarea id="default-configuration" name="default-configuration-content">@projectForm("default-configuration-content").value()</textarea>
					</dd>
				</dl>
			</div>
			
			<div class="column-wide">
				<input type="submit" value="@Messages.get("view.project.create.button.text")" />
				<a href="@routes.Projects.listProjects()" title="@Messages.get("view.common.cancel.label")"><button type="button">@Messages.get("view.common.cancel.label")</button></a>
			
			</div>
			
		}
		
		<div class="clear-right"></div>
	</div>
	
	<fieldset>
		<legend>@Messages.get("view.project.projects.list.header")</legend>
		
		@controls.list(projects)
	</fieldset>
	
}
